import * as React from "react";
import {BaseProps} from "../../../App";
import TabList from "@material-ui/lab/TabList";
import Tab from "@material-ui/core/Tab";
import TabContext from "@material-ui/lab/TabContext";
import {MenuItem} from "@material-ui/core";
import Select from "@material-ui/core/Select";
import "./Workspace.css"
import {ServiceApi} from "../../../framework/api/ServiceApi";
import {AppLanguage, AppModel, AppType} from "../../model/AppModel";

interface AppDetailState {
    tabs: {
        data: Array<{ id: string; name: string; path: string }>;
        currentTab: string;
    },
    currentApp: AppModel,
    apps: Array<AppModel>
}

export class WorkSpace extends React.Component<BaseProps, AppDetailState> {

    constructor(props: BaseProps) {
        super(props);
        this.tabChanged = this.tabChanged.bind(this);
        this.appChange = this.appChange.bind(this);
        const data = [{id: '1', name: '构建', path: 'build'}, {id: '2', name: '发布', path: 'deploy'}];
        this.state = {
            tabs: {
                data: data,
                currentTab: '1'
            },
            currentApp: {
                name: '',
                id: '',
                groupId: '',
                language: AppLanguage.JAVA,
                type: AppType.MICROSERVICE,
                source: ''
            },
            apps: []
        };
    }

    tabChanged(event: any, value: any) {
        this.setState({
            tabs: {...this.state.tabs, currentTab: value}
        });
        this.pathChange(this.state.currentApp.id, value);
    }

    pathChange(appId: string, tabId: string) {
        const tab = this.state.tabs.data.filter(item => item.id === tabId)[0];
        this.props.history.push('/workspace/' + appId + '/' + tab.path);
    }

    appChange(event: any) {
        const appId = event.target.value;
        let item = this.state.apps.filter((value, index) => value.id === appId)[0];
        this.setState({
            currentApp: item
        }, () => {
            this.pathChange(item.id, this.state.tabs.currentTab);
        })
    }

    componentDidMount(): void {
        const currentTab = this.buildCurrentTabId(this.props.location.pathname, this.state.tabs.data);
        ServiceApi.getAppList({}).then(res => {
            let apps = res.data.result.content;
            let currentApp = apps[0];
            this.setState({
                tabs: {...this.state.tabs, currentTab: currentTab},
                currentApp: currentApp,
                apps: apps
            }, () => {
                this.pathChange(currentApp.id, currentTab);
            })
        });
    }

    buildCurrentTabId(pathname: any, data: any) {
        let paths = pathname.split('/');
        for (let i = 0; i < paths.length; i++) {
            for (let j = 0; j < data.length; j++) {
                if (paths[i] === data[j].path) {
                    return data[j].id;
                }
            }
        }
        return data[0].id;
    }

    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {

        return <div className={'main-content workspace-root'}>
            <div className={'workspace-tab-app'}>
                <Select value={this.state.currentApp.id} onChange={this.appChange}>
                    {this.state.apps?.map((item, index) => (
                        <MenuItem key={index} value={item.id}>{item.name}</MenuItem>))}
                </Select>
            </div>
            <div className={'workspace-tab'}>
                <TabContext value={this.state.tabs.currentTab}>
                    <TabList indicatorColor="primary" textColor="primary" onChange={this.tabChanged} centered>
                        {this.state.tabs.data.map((item, index) => (
                            <Tab key={index} value={item.id} label={item.name}/>))}
                    </TabList>
                </TabContext>
            </div>

        </div>;
    }

}
